<template>
  <div>
    <h1>App</h1>

    <input type="text" v-model="msg" />

    <button>MSG: {{ msg }}</button>
    <button>NAME: {{ name }}</button>
    <button>ALEN: {{ aLen }}</button>
    <button>BLEN: {{ bLen }}</button>

    <button @click="bChangeM()">提交 B change</button>
    <button @click="aChangeA()">派发 A change</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";

export default {
  computed: {
    // ...mapState("a", ["msg"]),
    ...mapState("b", ["name"]),
    ...mapGetters({
      aLen: "a/len",
      bLen: "b/len",
    }),

    msg: {
      get() {
        return this.$store.state.a.msg;
      },

      set(value) {
        console.log("value", value);
        // 提交对应的 mutation
        this.$store.commit("a/changeMsg", value);
      },
    },
  },

  created() {
    console.log(this.$store);
  },

  methods: {
    ...mapMutations({
      bChangeM: "b/change",
      aChangeM: "a/change",
    }),
    ...mapActions({
      bChangeA: "b/change",
      aChangeA: "a/change",
    }),

    fn1() {
      this.$store.commit("b/change");
    },

    fn2() {
      this.$store.dispatch("b/change");
    },
  },
};
</script>
